<template>
    <div id="app">
        <!-- 返回按钮 -->
        <div @click="buck()" class="back_icon">
            
        </div>
        <!-- 商品轮播图 -->
        <div class="product_img">
            <swiper ref="mySwiper" :options="swiperOptions">
                <swiper-slide v-for="(item,index) in arr" :key="index"><img :src="item.url" alt=""></swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
        <!-- 商品信息 -->
        <div class="product_news">
            <!-- 商品标题 -->
            <p class="title">{{arrCar_new.goodsTitle}}</p>
            <!-- 商品价格 & 地址 -->
            <div class="and">
                <span>￥{{arrCar_new.money}}</span>
                <span>产地：上海</span>
            </div>
            <!-- 退货 -->
            <div class="retreat">
                <span>!</span> 不支持7天无理由退货
            </div>
        </div>
        <!-- 商品规格 -->
        <div class="product_specs">
            <div class="specs">
                规格<span>{{arrCar_new.size}}/1份</span>
            </div>
            <div class="size">
                <span>数量</span>
                <div class="num">
                    <div class="cut">-</div>
                    <div class="number">1</div>
                    <div class="add">+</div>
                </div>
            </div>
        </div>
        <!-- 地址信息 -->
        <div class="address_box">
            <div class="song">
                送至
            </div>
             <div class="address">
                 <!-- 地址 -->
                 <div class="address_img">
                     杭州市
                 </div>
                 <!-- 送货情况 -->
                 <div class="address_state">
                     <span>有货</span>
                     <span>18:00 前完成订单，预计明日(5月16日)发货</span>
                 </div>
             </div>
        </div>
        <!-- 图文详情 -->
        <div class="img_txt">
            <span>查看图文详情</span>
        </div>
        <!-- 加入购物车 -->
        <div class="car_footer">
            <!-- 首页 -->
            <div class="home">
                <div class="img_home"></div>
                首页
            </div>
            <!-- 购物车 -->
            <div class="car">
                <div class="img_car"></div>
                购物车
            </div>
            <!-- 加入购物车 -->
            <div @click="addCar" class="tocar">
                加入购物车
            </div>
            <!-- 购物车数量 -->
            <div class="carNum">{{$store.state.carNum}}</div>
        </div>
    </div>
</template>

<script>

export default({
    data() {
      return {
        swiperOptions: {
          pagination: {
            el: '.swiper-pagination',
            stopOnLastSlide: true
          },
          loop:true
        },
        arr:[], //存储轮播图数据
        arrCar:[],//存储商品数据
        arrCar_new:[],//存储最终数据
        typeId:0,//获取路由传参
        goodsId:0//获取路由传参
      }
    },
    methods:{
        //返回上一层
        buck:function(){
            history.go(-1)
            document.getElementsByClassName('menu_box')[0].style.display = ''
        },
        //加入购物车
        addCar(){
            this.$store.state.isAds = true;
            this.$store.commit("carStore",this.arrCar_new);
        },
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    created(){
        //隐藏底部导航栏
        document.getElementsByClassName('menu_box')[0].style.display = 'none'
        //获取路由传参
        this.typeId = this.$route.params.typeId;
        this.goodsId = this.$route.params.goodsId;
        this.axios({
            url:'https://www.fastmock.site/mock/4d5c012d77197ed4ac07275d896e3e05/home_goodList/home/goodsList',
            methods:'GET'
        }).then(res=>{
            this.arrCar = res.data;
            this.arrCar.forEach(item=>{
                if(item.typeId == this.typeId){
                    this.arrCar = item
                }
            })
            this.arrCar_new = this.arrCar.data[this.goodsId]
            this.arr = this.arrCar_new.images
        })
    }
})
</script>


<style scoped>
    #app{
        position: relative;
        background: #f4f4f4;
    }
    .product_img{
        width: 100%;
        height: 375px;
    }
    .swiper-container{
        width: 100%;
        height: 100%;
    }
    .product_img img{
        width: 100%;
        height: 100%;
    }
    .product_img >>> .swiper-pagination-bullet-active{
        background: #11b57c;
    }
    .product_news{
        width: 90%;
        margin-bottom: 10px;
        padding: 0 5%;
        background: #fff;
    }
    .product_news .title{
        font-size: 18px;
        margin-bottom: 20px;
    }
    .and{
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .and :nth-of-type(1){
        font-size: 19px;
        color: #EB3939;
    }
    .and :nth-of-type(2){
        font-size: 12px;
        color: #999999;
    }
    .retreat{
        border-top: 1px solid #f4f4f4;
        width: 100%;
        height: 50px;
        display: flex;
        color: #aaa;
        align-items: center;
    }
    .retreat span{
        width: 12px;
        height: 12px;
        border: 1px solid#aaa;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 5px;
    }
    .back_icon{
        position: absolute;
        width: 33.8px;
        height: 33.8px;
        z-index: 999;
        left: 10px;
        top: 10px;
        background: url("https://i.loli.net/2021/06/03/WEcr5oAwxnv9bSJ.png") no-repeat;
        background-size: 100% 100%;
    }
    .product_specs{
        width: 90%;
        height: 112px;
        padding: 0 5%;
        color: #999999;
        background: #fff;
    }
    .specs{
        font-size: 13px;
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
    }
    .specs span{
        margin-left: 15px;
        color: #01B27A;
        width: 70px;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #01B27A;;
        border-radius: 1rem;
    }
    .size{
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
    }
    .product_specs .specs{
        border-bottom: 1px solid#f4f4f4;
    }
    .num{
        margin-left: 10px;
        width: 78.5px;
        height: 28px;
        display: flex;
        border: 1px solid #ddd;
        border-radius: .2rem;
    }
    .num div{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .number{
        color: black;
        border-right: 1px solid #ddd;
        border-left: 1px solid #ddd;
    }
    .cut{
        font-size: 18px;
        color: #bababa;
    }
    .add{
        font-size: 18px;
        color: #bababa;
    }
    .address_box{
        width: 90%;
        height: 75px;
        padding: 0 5%;
        background: #fff;
        display: flex;
        margin-top: 10px;
    }
    .address_box .song{
        width: 10%;
        margin-top: 12px;
    }
    .address_box .address{
        width: 90%;
        height: 100%;
    }
    .address{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .address_img{
        display: flex;
        font-size: 14px;
        align-items: center;
    }
    .address_state :nth-of-type(1){
        color: #01B27A;
        margin-right: 5px;
    }
    .img_txt{
        padding: 20px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        margin-top: 10px;
        margin-bottom: 50px;
    }
    .img_txt span{
        font-size: 14px;
        color: #999;
        padding: 5px 15px;
        border: 1px solid #999;
        border-radius: .1rem;
    }
    .car_footer{
        width: 100%;
        height: 50px;
        background: #fff;
        border-top: 1px solid #f4f4f4;
        display: flex;
        color: #8d8a8a;
        position: fixed;
        bottom: 0;
    }
    .car_footer .home {
        flex: 1;
        font-size: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .car_footer .car {
        flex: 1;
        font-size: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .car_footer .tocar {
        flex: 4;
        background: #FB3D3D;
        font-size: 18px;
        font-weight: 400;
        color: #fff;
        line-height: 250%;
        text-align: center;
    }
    .img_home{
        width: 20px;
        height: 18.5px;
        background: url(https://i.loli.net/2021/06/03/HvksqrRAiFxY7U1.png) no-repeat;
        background-size: 100% 100%;
    }
    .img_car{
        width: 21px;
        height: 21px;
        background: url(https://i.loli.net/2021/06/03/KDWab2O5UASfNr1.png) no-repeat;
        background-size: 100% 100%;
    }
    .carNum{
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: red;
        position: absolute;
        left: 28%;
        top: -12%;
        color: white;
        font-size: 12px;
        text-align: center;
        line-height: 18px;
    }
</style>